<template>
	<div id="recommend">
		<div class="recommen">
			<p>推荐歌单</p>
			<i class="iconfont icon-refresh" @click="change" @touchstart="col" @touchend="coL" :style="{color: cL}">换一批</i>
		</div>
		<div id="geDan">
			<div class="gedan" v-for='(item,index) in recMusic' :key="index" ><img :src="item.pic_small" />
			<i class="iconfont icon-iconfonterji">{{Math.floor(Math.random()*30000)}}</i>
			</div>
		</div>
	</div>

</template>

<script>
import jsonp from "jsonp";
	export default {
		name: "",
		data() {
			return {
				MyMusic: JSON.parse(sessionStorage.getItem("MyMusic")),
				num:"",
				cL:"#666666",
			}
		},
		created() {
			if(!this.MyMusic) {
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.song.getRecommandSongList&song_id=877578&num=30", null, (err, res) => {
					if(!err) {
						let gedan = res.result.list;
						this.MyMusic = gedan;
						sessionStorage.setItem("MyMusic", JSON.stringify(gedan));
					} else {
						console.log(err);
					}
				})
			}			
		},
		computed: {
			recMusic() {
				if(this.MyMusic) {
					return this.MyMusic.slice(this.num, this.num+6);
				}
			}
		},
		methods: {
			change() {
				this.num = Math.floor(Math.random()*24);
				console.log(this.num);
			},
			col(){
				this.cL = "skyblue";
			},
			coL(){
				this.cL = "#666666";
			}
		}
	};
</script>

<style lang="scss" >
@charset "utf-8";
	/*html,body{
		width: 100%;
		height: 100%;
	}*/
	#recommend{
		width: 100%;
		/*height: 100%;*/
		overflow: auto;
		.recommen {
			width: 100%;
			height: 1*1.65rem;
			text-align: center;
			line-height: 1*1.65rem;
			position: relative;
			p {
				font-size: 0.3*1.65rem;
				font-weight: 800;
			}
			.icon-refresh {
				font-size: 0.28*1.65rem;
				color: #666666;
				position: absolute;
				left: 80%;
				top: 0;
			}
		}
		#geDan {
			width: 100%;
			/*height: 100%;*/
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.gedan {
				width: 32%;
				margin-bottom: 0.2*1.65rem;
				position: relative;
				img {
					display: block;
					width: 100%;
				}
				i{
					font-size: 0.3*1.65rem;
					position: absolute;
					top: 0.08*1.65rem;
					left: 0.12*1.65rem;
					color: #666666;
				}
			}
		}
	}
	
</style>